<template>
  <div class="forget-password-container">
    <div class="forget-password-card">
      <img src="../assets/返回.svg" @click="handleBack" alt="返回" class="back-image" style="width: 40px; height: 40px;" />

      <h1 class="title">重置密码</h1>

      <div class="form-group">
        <div class="input-wrapper">
          <i class="fas fa-mobile-alt input-icon"></i>
          <input v-model="phone" type="tel" placeholder="请输入手机号" class="input-field" @focus="handleFocus"
            @blur="handleBlur">
        </div>
      </div>

      <div class="form-group">
        <div class="verification-wrapper">
          <div class="input-wrapper">
            <i class="fas fa-sms input-icon"></i>
            <input v-model="verificationCode" type="text" placeholder="请输入验证码" class="input-field verification-input"
              @focus="handleFocus" @blur="handleBlur">
          </div>
          <button class="verification-btn" :class="{ disabled: isCountingDown }" :disabled="isCountingDown"
            @click="getVerificationCode">
            {{ countdownText }}
          </button>
        </div>
      </div>

      <div class="form-group">
        <div class="input-wrapper">
          <i class="fas fa-lock input-icon"></i>
          <input v-model="newPassword" type="password" placeholder="请输入新密码" class="input-field" @focus="handleFocus"
            @blur="handleBlur">
        </div>
      </div>

      <button class="submit-btn" :class="{ active: isFormValid }" :disabled="!isFormValid" @click="submitForm">
        确认修改
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
const phone = ref('');
const verificationCode = ref('');
const newPassword = ref('');
const verificationId = ref(''); // 新增，用于存储验证码标识
const isCountingDown = ref(false);
const countdown = ref(10);
const router = useRouter();

const handleBack = () => {
  router.push({ name: 'Login' });
};

const countdownText = computed(() => {
  return isCountingDown.value ? `${countdown.value}秒后重新获取` : '获取验证码';
});

const isFormValid = computed(() => {
  return phone.value && verificationCode.value && newPassword.value;
});

const handleFocus = (event: Event) => {
  const input = event.target as HTMLInputElement;
  input.style.borderColor = '#1890ff';
};

const handleBlur = (event: Event) => {
  const input = event.target as HTMLInputElement;
  input.style.borderColor = '#e8e8e8';
};

const getVerificationCode = async () => {
  if (!phone.value) {
    alert('请输入手机号');
    return;
  }

  try {
    // 调用后端接口获取验证码
    const response = await axios.post('/send-sms-code', { phone: phone.value });
    if (response.data) {
      verificationId.value = response.data.verificationId; // 存储验证码标识
      isCountingDown.value = true;
      const timer = setInterval(() => {
        countdown.value--;
        if (countdown.value === 0) {
          clearInterval(timer);
          isCountingDown.value = false;
          countdown.value = 10;
        }
      }, 1000);
    } else {
      alert('获取验证码失败1，请稍后重试');
    }
  } catch (error) {
    console.error('获取验证码失败:', error);
    alert('获取验证码失败2，请稍后重试');
  }
};

const submitForm = async () => {
  try {
    // 调用后端接口提交表单
    const response = await axios.post('/forget-password', {
      phone: phone.value,
      verificationCode: verificationCode.value,
      newPassword: newPassword.value,
      verificationId: verificationId.value // 发送验证码标识
    });
    if (response.data.code === 200) {
      alert('密码重置成功，请使用新密码登录');
      router.push({ name: 'Login' });
    } else {
      alert(response.data.msg);
    }
  } catch (error) {
    console.error('提交表单失败:', error);
    alert('密码重置失败，请检查信息并稍后重试');
  }
};
</script>

<style scoped>
@import '../assets/css/ForgotPassword.css';
</style>